<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../../v2/common/jspcommon.jsp"%>
<link href="../../../css/home_css/home.css" rel="stylesheet" type="text/css" />
<title>添加新产品</title>
<script type="text/javascript">
		var category = "";
		$(function() {
			initProductCategory();
			//alert("333333");
		});
		//上传图片
		function productUploadImg(){
			var filepath=$("#uploadImgProduct").val(); 
			var extStart=filepath.lastIndexOf("."); 
			var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 
			if(ext!=".PNG"&&ext!=".JPG"&&ext!=".JPEG"&&ext!=".GIF"){ 
				alert("图片限于png,jpeg,jpg,gif格式"); 
				return ; 
			}
			$("#product_upload_img_form").ajaxSubmit({
				dataType : 'json',
				cache : false,
				success : function(data) {
					$("#image_server").val(data.imageServer);
					$("#productImage").val(data.pictureUrl);
					$("#selectImage").html("<img  id='selectImage_image' width='120px'  src='"+data.imageServer+data.original+"'>");
					 if(data.pictureUrl!=""){
						 alert("上传图片成功");
					}else{
						alert("上传图片失败");
						
					}
				},
				error : function(err) {
					alert(err);
				}
			});
			return false;
		}
		//初始化类目
		function initProductCategory() {
			$.get("/misc/product/getProductCategory.htm", function(data) {
				$.each(data, function(i) {
					$("#category1").append(
							"<a herf='javascript:void(0);' class='' title='"
									+ data[i].name
									+ "' onclick='showProductCategory2("
									+ data[i].identifier + "," + 'this' + ");'>"
									+ data[i].name + "</a>");
				});
			}, 'json');
		}
	//显示二级类目
	 function showProductCategory2(productCategory1Id, t) {
		$(".h_marketClass_2_hover").attr("class", "");
		$(t).attr("class", "h_marketClass_2_hover");
		categoryName = $(t).attr("title");
		var $BCategory = $("#category2");
		$.get("/misc/product/getProductCategory.htm",
						function(data) {
							$.each(data,function(i) {
												if (data[i].identifier == productCategory1Id) {
													var tmp = data[i].children;
													if (tmp == "") {
														$("#categoryItems")
																.hide();
														$("#selectCategory")
																.html(categoryName
																				+ "  <a href='javascript:void(0);' class='selectCategory_A' onclick='reChoose();'>重选类目</a>");
														category = data[i].identifier;
														categoryName += data[i].name
																+ "» "
														$BCategory.hide();
														$BCategory.prev().hide();
													} else {
														$BCategory.html("");
														$BCategory.prev().show();
														$BCategory.show();
														$.each(tmp,function(i) {
															  $BCategory.append("<a herf='javascript:void(0);' title='"
																							+ tmp[i].name
																							+ "' class='' onclick='getProductCategory2("
																							+ tmp[i].identifier
																							+ ","
																							+ 'this'
																							+ ");'>"
																							+ tmp[i].name
																							+ "</a>");
																		});
													}
												}

											});
						}, 'json');
	} 
	
	//重选类目
		function reChoose() {
			$("#selectCategory").html("");
			$("#categoryItems").show();
			$("#updateCategoryName").remove();
			$("#categoryUpdate").val('');
		}
		//获取二级类目
		function getProductCategory2(productCategory2Id, t) {
			$("#categoryItems").hide();
			categoryName = $(".h_marketClass_2_hover").attr("title") + "» "
					+ $(t).attr("title");
			$("#selectCategory")
					.html(
							categoryName
									+ "  <a href='javascript:void(0);' class='selectCategory_A' onclick='reChoose();'>重选类目</a>");
			category = productCategory2Id;
		}
		//保存产品
		function saveProduct(){
			$.post("/misc/product/submitSaveProduct.htm",{
				category :category,
				title : $("#title").val(),
				price : $("#price").val(),
				cover : $("#productImage").val(),
				amount: $("#amount").val(),
				imageServer : $("#image_server").val(),
				description : $("#description").val()
			},function(data){
				if(data=='success'){
					clearRushStyle();
					//alert("1111111");
					$('#product_content').load("/misc/product/readProduct.htm");
				}
			});	
	}
		//更新产品
		function updateProduct(){
			
			if($("#categoryUpdate").val()==''){
				
				$.post("/misc/product/updateProductById.htm",{
					category :category,
					identifier:$("#productId").val(), 
					title : $("#title").val(),
					price : $("#price").val(),
					amount : $("#amount").val(),
					cover : $("#productImage").val(),
					description : $("#description").val(),
					imageServer : $("#image_server").val()
				},function(data){
					if(data=='success'){
						clearRushStyle();
						$('#product_content').load("/misc/product/readProduct.htm");
					}
				});	
			}else{
				$.post("/misc/product/updateProductById.htm",{
					category :$("#categoryUpdate").val(),
					identifier:$("#productId").val(), 
					title : $("#title").val(),
					price : $("#price").val(),
					cover : $("#productImage").val(),
					amount : $("#amount").val(),
					description : $("#description").val(),
					imageServer : $("#image_server").val()
				},function(data){
					if(data=='success'){
						clearRushStyle();
						$('#product_content').load("/misc/product/readProduct.htm");
					}
				});	
			}
			
		}
</script>

</head>
<body>
	<div>
		<table border="1" width="50%" style="color: red;">
			<tr>
					<td class="PI_text"><span class="colorRed">*</span> 产品/服务类型：</td>
					<td>
						<div id="categoryItems">
							<div class="h_marketClass_2" id="category1"></div>
							<div class="h_marketClass_3"></div>
							<div class="h_marketClass_4 clearfix" style="width: 400px;"id="category2"></div>
						</div>
						<div id="selectCategory"></div>
						<c:if test="${not empty product.identifier}">
							<div id="updateCategoryName">${product.categoryName}+ "  <a href='javascript:void(0);' class='selectCategory_A' onclick='reChoose();'>重选类目</a>"
							</div>
						</c:if>
						<div id="categoryTips"></div>
					</td>
		  </tr>
		</table>

	</div>
	<div>
		<table border="1" width="50%">
			<tr>
				<td>上传新产品图片：
					<form id="product_upload_img_form" enctype="multipart/form-data"
						method="post" action="/misc/product/productUploadImg.htm">
						<input type="file" id="uploadImgProduct" name="uploadImgProduct"
							onchange="productUploadImg();return false;">
					</form></td>
				<td>
					<input type="hidden" value="${product.identifier}" id="productId"/>
					<input type="hidden" value="${product.category}" id="categoryUpdate"/>
					新产品标题：<input type="text" style="height: 20px" id="title" value="${product.title}" /><i style="color: red;">(*保证产品标题唯一性)</i>
					<br /> &nbsp;&nbsp;&nbsp;产品价格：<input type="text" style="height: 20px" id="price" value="${product.price}" />
					<br />&nbsp;&nbsp;&nbsp;产品数量：<input type="text" style="height: 20px" id="amount" value="${product.amount}" />
				</td>
				<td rowspan="2"><c:choose>
						<c:when test="${not empty product.identifier}">
							<input type="button" value="更新产品" onclick="updateProduct();"
								style="width: 150px" />
						</c:when>
						<c:otherwise>
							<input type="button" value="添加新产品" onclick="saveProduct();"
								style="width: 150px" />
						</c:otherwise>
					</c:choose></td>
			</tr>
			<tr>
				<td>显示<span style="color: red">LOGO</span>图片： <input
					type="hidden" id="productImage" name="productImage" value="${product.cover}" /> <input
					type="hidden" id="image_server" name="imageServer" value="${product.imageServer}">
					<div id="selectImage" style="text-align: right;">
						<c:if test="${not empty product.identifier}">
							<div id="updateCover"><img alt="" src="${product.imageServer}${product.cover}" width="80px;"></div>
						</c:if>	
					</div>
				</td>
				<td>产品详细备注：<textarea style="height: 100px; width: 500px;"
						id="description" name="description" >${product.description}</textarea>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>